Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

153
Views
Javascript countdown timer [Android] when the browser tab is innactive or the phone is locked

I'm making an HTML/CSS/Javascript Pomodoro timer project. It's essentially a countdown timer. For the timer, I'm using SetInterval which updates the DOM. There is also a Date object for more accuracy. Sound/Alert is played when the seconds and minutes are equal to 0. Here's the whole code on jsfidle, also a live demo. For testing purposes, the Pomodoro minutes are set to a low number.

function starttimer() {
  // Create a new date element and add the pomodoro interval
  let ddate = new Date();
  ddate.setMinutes(ddate.getMinutes() + pomodoroMinutes);
  timer.startTime = ddate;

  if (isStarted === true) {
    let ddate = new Date();
    ddate.setMinutes(ddate.getMinutes());
    timer.startTime = ddate;
  }

  timer.intervalId = setInterval(() => {
    calcMinsSeconds();
    width = (minutes * 60000 + seconds * 1000) / (pomodoroMinutes * 600);
    //update the Progress bar
    elem.style.width = width + "%";
    


    if (seconds == 0 && minutes == 0 && state === 'study') {
   
      width = 100;
      elem.style.width = width + "%";
      ddate.setMinutes(ddate.getMinutes() + pomodoroMinutes);
      clearInterval(timer.intervalId)
      buttonsState(true, true, true, false, false);
      alertSound.play();
    }

    else if (seconds == 0 && minutes == 0 && state === 'break') {
      clearInterval(timer.intervalId)
      buttonsState(false, true, true, true, true);
      pomodoroMinutes = initialInterval;
      state = 'study';
      alertSound.play();
      clearButton.disabled = true;
      resetTimes();

    }

  }, 10);
}

I tested it on desktop and so far I didn't find any issues. When I tested it on my Android phone, though... Firstly on Chrome. When I launch it works only when my display is turned on. When it's off, it just continues to countdown timer below 0 minutes/seconds. On Firefox it's the same, plus even when the display is on, the sound alert doesn't play if the tab/browser is inactive.

So I'm wondering what's the right approach. Should I use Web Worker or Service worker for this? I recently read about them on MDN. Since I need this code to run in the background when the phone is locked. If that's the case I'm not sure how to implement it, since the workers cant do DOM operations.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!